<template>
  <div class="goods contain">
    <el-table
      :data="tableData"
      style="width: 100%"
      @cell-click="goDetail"
      stripe
    >
      <el-table-column label="商品图片" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <img :src="baseUrl + scope.row.coverImg" class="image" width="180" />
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="180">
        <template slot-scope="scope">
          <b>{{ scope.row.goodsName }}</b>
        </template>
      </el-table-column>
      <el-table-column label="价格">
        <template slot-scope="scope">
          <i style="font-size: 17px; color: red">￥{{ scope.row.price }}</i>
        </template>
      </el-table-column>
       <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="medium"
            @click.stop="edit(scope.row._id, scope.row)"
            >加入收藏</el-button
          >
          <el-button
            size="medium"
            type="danger"
            @click.stop="del(scope.row._id, scope.row)"
            >购买</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "GoodsTable",
  props: ["tableData"],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      count: 0,
      pages: 1,
    };
  },
  methods: {
    goDetail(x) {
      this.$router.push({ path: "/detail", query: { id: x._id } });
    },
    load() {
      this.axios.get("/api/v1/product").then((res) => {
        console.log(res);
      });
    },
    edit(id){
        console.log(id);
    },
    del(id){
        console.log(id);
    }
  },
  created() {
  },
};
</script>
<style scoped>
.goods {
  height: 100%;
  /* overflow: auto; */
}
.goods-con {
  display: flex;
  justify-content: space-around;
}
.goods-con li {
  float: left;
  width: 100%;
  height: 180px;
}
.goods-con img {
  /* height: 175px;
  width: 260px; */
  height: 100%;
}
</style>